<template>
  <div class="flex items-center talking">
    <div class="talking-cursor"></div>
    <div class="flex items-center ml-2">
      <span class="talking-text" :style="{'animation-delay': `${i * .05}s`}" v-for="d, i in $t('loadingText').split('')" :key="i">
        {{d}}
      </span>
    </div>
  </div>
</template>

<style scoped>
  .talking {}

  .talking-cursor {
    width: 5px;
    height: 1.2rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, .5);
    animation: fadeLoop .5s infinite;
  }

  .talking-text {
    animation-name: opacityLoop;
    animation-duration: .75s;
    animation-iteration-count: infinite;
    /* animation: opacityLoop 1s infinite; */
  }

  @keyframes opacityLoop {
    100% {
      opacity: 0.1;
    }
  }

  @keyframes fadeLoop {
    50% {
      opacity: 0.2;
    }
  }
</style>